<template>

	<el-container style="height: 100%; border: 1px solid #eee">
		<el-container>
			<el-header style="text-align: right; font-size: 12px">
				<el-input v-model="param.key" placeholder="请输入内容" style="margin-top: 20px; width: 300px;"></el-input>
				<el-button @click="search()" type="info">搜索</el-button>
			</el-header>
			<el-main>
				<router-view></router-view>
				<el-table border :data="tableData">
					<el-table-column prop="title" label="应用名称" width="200">
					</el-table-column>
					<el-table-column prop="version" label="版本号" width="340px">
					</el-table-column>
					<el-table-column prop="intro" label="应用介绍" width="400">
					</el-table-column>
					<el-table-column prop="author" label="应用作者">
					</el-table-column>
					<el-table-column prop="tag" label="标签">
						<template slot-scope="scope">
							<el-button type="text" size="large" @click="tag(scope.row.tag)">
								{{ scope.row.tag }}</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页 -->
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page.sync="currentPage" :page-size="param.limit"
					layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</el-main>
		</el-container>
	</el-container>
</template>
<style>
	.el-aside {
		color: #333;
	}

	.el-pagination {
		margin-top: 10px;
	}
</style>

<script>
	export default {
		data() {
			return {
				input: '',
				tableData: [],
				currentPage: 5,
				param: {
					tag: '',
					page: 1,
					limit: 10,
					key: ''
				},
				total: 1
			}
		},
		created() {
			this.getList();
		},
		methods: {
			async getList() {
				// console.log(this.param);
				// params.page = 1
				// Object.assign(this.param,params)
				// this.param = {...this.param,...params}
				// console.log(this.param);
				const {data: res} = await this.$ajax.get('http://www.code.test/api/app', {
					params: this.param
				});
				this.currentPage= this.param.page
				this.tableData = res.data
				this.total = res.total
				//console.log(res);
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				this.param.page = val
				this.getList()
				console.log(`当前页: ${val}`);
			},
			search() {
				this.param.tag = ''
				// this.param.key = key
				this.param.page = 1
				this.getList()
			},
			
			tag(val) {
				this.param.page = 1
				this.param.tag = val
				this.getList()
			},
		}
	}
</script>
